<template>
    <div>
      <SupInput
        :InpList="inpList"
        :BtnList="btnList"
        :selList="selList"
        @clickFn="btnFn"
      ></SupInput>
      <Suptable
        :isTag="true"
        :TagName="TagName"
        :headerData="headerData"
        :tableData="tableData"
        :isPage="true"
        :border="true"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :current-page="pagenum"
        :pagesizeList="fenye"
        :pagesize="pagesize"
      >
      <template v-slot:tagSlot="{ row }">
        <el-tag :type="row.row.apptype == '已完成'
                  ? 'success'
                  : row.row.apptype == '待处理'
                  ? 'info'
                  : row.row.apptype == '退货中'
                  ? 'warning'
                  : row.row.apptype == '已拒绝'
                  ? 'danger':''"
                  >{{ row.row.apptype }}</el-tag>
      </template>
      <template v-slot:opera="{ row }">
        <el-button type="primary" @click="goEdit(row.row)" size="small"
          :disabled=" row.row.apptype == '待处理'? false:true ">审批</el-button
        >
        <el-button type="danger" @click="godelete(row.row.id)" size="small"
          >删除</el-button
        >
      </template>
      </Suptable>
      <div>
      <el-dialog title="提现申请" :visible.sync="dialogVisible" width="30%">
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="审批状态" prop="apptype">
              <el-radio-group v-model="ruleForm.apptype">
                <el-radio label="通过"></el-radio>
                <el-radio label="拒绝"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="服务单号" prop="id">
              <el-input v-model="ruleForm.id"></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      </div>
    </div>
</template>
<script>
import { approvalList ,detApproval,editApproval,queryApproval} from "@/api/approvalMock.js";
import Suptable from "@/components/Suptable";
import SupInput from "@/components/SupInput";
export default {
  name: "orderApproval",
  data() {
    return {
      dialogVisible: false,
      pagenum: 1,
      pagesize: 10,
      total: 0,
      fenye: [5, 10, 15, 20],
      tableData: [],
      value: [],
      TagName:"申请状态",
      inpList: [
        {
          text: "请输入服务单号",
          model: "",
        },
        {
          text: "请输入有手机号",
          model: "",
        },
      ],
      btnList: [
        {
          icon: "el-icon-search",
          name: "查找",
        },
      ],
      selList: [
        {
          title: "请选择审批状态",
          value: [],
          options: [
            // 0退货中  1已拒绝 2已完成 3待处理
            {
              value: "0",
              label: "退货中",
            },
            {
              value: "1",
              label: "已拒绝",
            },
            {
              value: "2",
              label: "已完成",
            },
            {
              value: "3",
              label: "待处理"
            }
          ],
        },
      ],
      headerData:[
          {
              prop:"id",
              label:"服务单号",
          },
          {
              prop:"addTime",
              label:"申请时间",
              width:"200"
          },
          {
              prop:"username",
              label:"用户账号"
          },
          {
              prop:"phone",
              label:"手机号码",
              width:"120"
          },
          {
              prop:"amount",
              label:"退款金额",
              width:"100"
          },
          {
              prop:"endTime",
              label:"处理时间",
              width:"200"
          }

      ],
      appId: "",
      ruleForm: {
        apptype: "",
      },
      rules: {
        apptype: [
          { required: true, message: "请选择审批状态", trigger: "change" },
        ],
      },
    };
  },
  mounted(){
      let _self = this;
      _self.orderApprovalList()
  },
  methods:{
      goEdit(row){
        let _self = this;
        console.log(row);
        _self.appId = row.id;
        _self.dialogVisible = true;
      },
      submitForm(formName) {
      let _self = this;
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          let {apptype } = _self.ruleForm;
          let data = {
            id: _self.appId,
            apptype: apptype == "通过" ? 0 : 1,
          };
          console.log(data);
          editApproval(data).then((res) => {
            console.log(res);
            _self.dialogVisible = false;
            _self.orderApprovalList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      },
      godelete(id) {
      console.log(id);
      let _self = this;
      _self.$confirm("确定删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let data = { id };
          detApproval(data).then((res) => {
            console.log(res);
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功",
              });
              _self.orderApprovalList();
            } else {
              _self.$message({
                type: "info",
                message: "res.meta.msg",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
      orderApprovalList(){
          let _self = this;
          let data={
              pagenum:_self.pagenum,
              pagesize:_self.pagesize
          }
          approvalList(data).then((res)=>{
              // console.log(res);
              _self.tableData = [];
              for(let item of res.data.user){
                  let approvalData ={
                      id:item.id,
                      username:item.username,
                      phone:item.phone,
                      addTime:item.addTime,
                      amount:"￥" + item.amount,
                      endTime:item.endTime,
                      apptype:
                      item.apptype == 0
                      ? "退货中"
                      : item.apptype == 1
                      ? "已拒绝"
                      : item.apptype == 2
                      ? "已完成"
                      : "待处理"
                  }
                  _self.tableData.push(approvalData)
              }
              _self.total = res.data.total;
              _self.pagenum = res.data.pagenum
          })
      },
      btnFn() {
      let _self = this;
      let data = {
        id: _self.inpList[0].model,
        phone: _self.inpList[1].model,
        apptype: _self.selList[0].value,
      };
      queryApproval(data).then((res)=>{
        console.log(res);
        if(res.meta.status == 200){
           _self.tableData = [];
          for (let item of res.data.arr) {
            let approvalData ={
                      id:item.id,
                      username:item.username,
                      phone:item.phone,
                      addTime:item.addTime,
                      amount:"￥" + item.amount,
                      endTime:item.endTime,
                      apptype:
                      item.apptype == 0
                      ? "退货中"
                      : item.apptype == 1
                      ? "已拒绝"
                      : item.apptype == 2
                      ? "已完成"
                      : "待处理"
                  }
            _self.tableData.push(approvalData);
            _self.pagesize = res.data.pagesize;
            _self.total = res.data.total;
          }
        }else{
          _self.pagesize = 10;
          _self.approvalData();
        }
      });
    },
      handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pagesize = val;
      _self.orderApprovalList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.pagenum = val;
      _self.orderApprovalList();
    },
  },
  components: { Suptable, SupInput },
};
</script>

<style>
</style>